<template>
	<view class="product-message">
		<view class="product-scroll-container">
			<!-- 修复：scroll-view 宽度设为100%，确保横向滚动容器占满屏幕 -->
			<scroll-view class="product-scroll" scroll-x show-scrollbar="false" :scroll-with-animation="true" style="width: 100%;">
				<view class="product-list">
					<view class="product-item" v-for="product in products" :key="product.id" @click="viewProduct(product)">
						<!-- 修复：图片容器加固定高度，避免塌陷 -->
						<view class="img_box">
							<image class="product-image" :src="product.images[0].url" mode="aspectFit" :alt="product.productName"></image>
						</view>
						<!-- 修复：商品名称支持两行省略，避免溢出 -->
						<text class="product-name">{{ product.productName }}</text>
						<view class="product-price">
							<text class="current-price">¥{{ product.price.toFixed(2) }}</text>
							<text class="original-price">¥{{ (product.originalPrice || product.price).toFixed(2) }}</text>
						</view>
						<view class="product-sales">
							<text class="sales-text">已售 {{ product.seled || 0 }}</text>
							<!-- 修复：按钮内边距优化，文字垂直居中 -->
							<view class="buy-btn" :class="{'buyed':sumQuantity(product)>0}"  @click="addcart(product)">
								<text class="buy_font">{{sumQuantity(product)>0?`已选${sumQuantity(product)}`:'立即购买'}}</text>
							</view> 
						</view>
						<!-- 修复：数量徽章添加偏移，避免遮挡 -->
						<view class="quantity" v-if="sumQuantity(product)>0">
							<text>{{ sumQuantity(product) }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
const db = uniCloud.databaseForJQL();

export default {
	props: {
		msg: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			itemWidth: 260, // 单个商品宽度（rpx，与样式一致）
			gap: 20, // 商品间距（rpx，与.product-list gap一致）
			products: []
		};
	},
	watch: {
		products: {
			immediate: true,
			handler(newval) {
				console.log('信息中的商品信息',newval);
				// 修复：总宽度计算包含 margin（每个商品左右各10rpx，共20rpx）
				const totalItemWidth = this.itemWidth + this.gap + 20; // 20 = margin-left + margin-right
				this.listTotalWidth = totalItemWidth * this.products.length - this.gap; // 减去最后一个gap
			}
		}
	},
	mounted() {
		this.initProduct();
	},
	methods: {
		async initProduct() {
			console.log(".........",this.msg);
			const res = await db
				.collection('sendgood')
				.where({
					_id: this.msg.content.productId
				})
				.get();
			this.products = res.data;
		},
		async getUrl(img) {
			const url = await uniCloud.getTempFileURL({ fileList: img });
			return url;
		},
		addcart(product) {
			console.log(product);
			this.$store.commit('cart/addItem', product);
			console.log(this.$store.state.cart.items);
		},
		viewProduct(product) {
		 const formated = encodeURIComponent(JSON.stringify(product));
			uni.navigateTo({ url: `/pages/goodDetail/goodDetail?product=${formated}` });
		},
		sumQuantity(product) {
			if (!product || !product._id) return 0;
			return this.$store.state.cart.items.reduce((sum, item) => {
				if (product._id === item._id) sum += item.quantity;
				console.log(sum);
				return sum;
			}, 0);
		}
	}
};
</script>

<style scoped>
.product-message {
	padding: 10rpx 0;
}

.product-scroll-container {
	overflow: hidden; /* 隐藏scroll-view的溢出部分 */
}

.product-scroll {
	white-space: nowrap; /* 确保横向滚动不换行 */
}

/* 修复：gap与JS中一致，去掉冗余padding */
.product-list {
	display: flex;
	flex-direction: row;
	gap: 20rpx; /* 与JS中gap一致 */
	padding: 5rpx 15rpx; /* 左右加15rpx padding，避免商品贴边 */
}

/* 修复：添加margin，与总宽度计算对应 */
.product-item {
	display: flex;
	position: relative; 
	flex-direction: column;
	justify-content: flex-start; /* 顶部对齐，避免内容错位 */
	width: 260rpx; /* 固定宽度，与JS中itemWidth一致 */
	padding: 10rpx;
	margin: 0 10rpx; /* 左右各10rpx，共20rpx，与JS计算对应 */
	background-color: #f9f9f9;
	border-radius: 10rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 修复：固定图片容器高度，与图片高度一致 */
.img_box {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200rpx; /* 与图片高度一致，避免塌陷 */
	margin-bottom: 10rpx;
	border-radius: 5rpx;
	overflow: hidden; /* 裁剪超出容器的图片 */
}

/* 修复：图片适配方式改为aspectFill，保留完整商品轮廓 */
.product-image {
	width: 100%;
	height: 100%;
	object-fit: aspectFill; /* 保持图片比例，填充容器（不裁剪关键内容） */
}

/* 修复：商品名称支持两行省略，添加省略号 */
.product-name {
	font-size: 28rpx;
	color: #333;
	line-height: 36rpx;
	margin-bottom: 10rpx;
	overflow: hidden;
	text-overflow: ellipsis; /* 超出部分显示省略号 */
	display: flex; /* 适配webkit内核 */
	-webkit-line-clamp: 2; /* 最多显示2行 */
	-webkit-box-orient: vertical; /* 垂直排列 */
}

.product-price {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 15rpx;
}

.current-price {
	font-size: 28rpx;
	color: #ff3b30;
	font-weight: bold;
	margin-right: 10rpx;
}

.original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
}

.product-sales {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.sales-text {
	font-size: 22rpx;
	color: #666;
}

/* 修复：按钮内边距优化，文字垂直居中 */
.buy-btn {
	padding: 8rpx 16rpx; /* 上下8rpx，左右16rpx，确保文字居中 */
	border-radius: 8rpx;
	background-color: #ff3b30;
}

.buyed {
	background-color: green; /* 已选状态颜色 */
}

.buy_font {
	font-size: 24rpx;
	color: #fff;
	line-height: 1.2; /* 确保文字行高正常 */
}

/* 修复：数量徽章添加偏移，避免遮挡 */
.quantity {
	position: absolute;
	top: 10rpx; /* 距离顶部10rpx */
	right: 10rpx; /* 距离右侧10rpx */
	z-index: 999;
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%; /* 改为50%，确保圆形更圆润 */
	background-color: green;
	color: white;
	font-size: 24rpx;
	display: flex; /* 内部文字居中 */
	justify-content: center;
	align-items: center;
}
</style>